<template>
	<view>
		<u-modal :show="show" showCancelButton @confirm="sendBack" @cancel="show=false">
			<view class="slot-content">
				<rich-text :nodes='content'></rich-text>
			</view>
		</u-modal>
		<view class="content" :class="typeClass">
			<view class="luck">
				<view class="row">
					<view class="term">
						金额
					</view>
					<view class="input">
						<input type="digit" style="width: 140rpx;" v-model="money" placeholder="输入金额" />
						<view>元</view>
					</view>
				</view>
				<view class="row" style="margin: 70rpx 0rpx 15rpx 0rpx;">
					<view class="blessing">
						<input type="text" maxlength="20" style="width: 100%;" placeholder="恭喜发财,大吉大利"
							v-model="blessing" />
					</view>
				</view>
				<view class="hand" @tap="hand">
					发红包
				</view>
				<text class="message">温馨提示：红包仅用作订单金额差价退补用，购物请拍订单付款</text>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: "",
				id: "",
				content: "",
				show: false,
				typeClass: 'luck', //normal
				number: '',
				money: '',
				luckMoney: '',
				blessing: '',
				redEnvelopeData: {}
			};
		},
		onLoad(e) {
			this.id = e.id
			if (e.type) {
				this.contentType = this.$reqConfig.CONTENTTYPE + ";+charset=UTF-8"
				this.token = uni.getStorageSync("merchantsToken").token
				this.type = "merchant"
			}
			console.log('e', e)
		},
		methods: {
			hand() {
				this.redEnvelopeData = {
					type: "type",
					number: this.number,
					blessing: this.blessing,
					money: this.money
				}
				//判断数据有效性
				if ((!this.redEnvelopeData.money) || this.redEnvelopeData.money <= 0) {
					return uni.showToast({
						title: "金额不能为空",
						icon: 'none'
					});
				}
				this.redEnvelopeData.blessing = this.redEnvelopeData.blessing || '恭喜发财'; //没填写则默认恭喜发财								
				this.content = `确定塞<span style="color: red;font-size: 20px">` + this.redEnvelopeData.money +
					`元</span>到红包中并发送给对方吗?`
				this.show = true


			},
			sendBack(redEnvelopeData) {
				if (this.type == "merchant") {
					console.log("商家发")
					//商家发红包
					this.$axios({
						url: 'system/sysRedEnvelope/sendRedEnvelopeData',
						method: "post",
						data: {
							id: this.id,
							blessing: this.redEnvelopeData.blessing,
							money: this.redEnvelopeData.money
						},
						header: {
							"Authorization": this.token,
							"Content-type": this.contentType,
							"type": "merchantsToken"
						}
					}).then((res) => {
						console.log('res', res)
						if (res.code == 0) {
							// //返回上一页
							this.redEnvelopeData.rid = res.result
							let pages = getCurrentPages(); // 当前页页⾯实例
							let prevPage = pages[pages.length - 2]; // 上一页面实例
							prevPage.$vm.sendRedEnvelopeData(this.redEnvelopeData) // 调用上一页 定义的方法
							uni.navigateBack()
						} else {
							this.show = false
						}
					})
				} else {
					console.log("用户发")
					//用户发红包
					this.$axios({
						url: 'system/sysRedEnvelope/sendRedEnvelopeData',
						method: "post",
						data: {
							id: this.id,
							blessing: this.redEnvelopeData.blessing,
							money: this.redEnvelopeData.money
						}
					}).then((res) => {
						console.log('res', res)
						if (res.code == 0) {
							// //返回上一页
							this.redEnvelopeData.rid = res.result
							let pages = getCurrentPages(); // 当前页页⾯实例
							let prevPage = pages[pages.length - 2]; // 上一页面实例
							prevPage.$vm.sendRedEnvelopeData(this.redEnvelopeData) // 调用上一页 定义的方法
							uni.navigateBack()
						} else {
							this.show = false
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff4f0;
	}

	.row {
		padding: 23rpx 29rpx;
		display: flex;
		justify-content: space-between;
		background-color: #ffffff;
		margin: 40rpx 0rpx 15rpx 0rpx;

		.input {
			display: flex;
		}
	}

	.message {
		font-size: 22rpx;
		color: #b4adaa;
		/* padding: 70rpx; */
		margin: 0px 66rpx;
		left: 103rpx;
	}

	.hand {
		background-color: #d83b34;
		margin: 95rpx 100rpx 10rpx 100rpx;
		padding: 25rpx;
		text-align: center;
		color: #fff;
		border-radius: 10rpx;
	}
</style>
